<template>
    <view class="main">
        <header-vue :back="true"></header-vue>
        <view class="flex between order-type select-box font30">
            <view class="item" v-for="(item, index) in orderType" :class="{active: orderIndex == index}"
                @click="orderIndex = index">{{item}}</view>
            <view class="flex filter-btn" @click="showFilter = true">
                <i class="iconfont icon-loudou font28"></i>
                <view>筛选</view>
            </view>
        </view>
        <scroll-view :scroll-x="true" class="scroll-x">
            <view class="flex start">
                <view v-for="(item, index) in typeList" :key="item.name" class="flex type font28"
                    :class="{active: item.type == typeIndex}" @click="getOrderTab(item.type)">
                    {{item.name}}
                </view>
                <image :src="IMAGE_URL + '/static/mine/op-next.png'" class="next-btn"></image>
            </view>
        </scroll-view>
        <view v-for="item in orderList" :key="item" class="white-box margin32" @click="goPage('/views/mine/detail')">
            <view class="flex between store-title font24">
                <view>订单编号：{{item.order_no}}</view>
                <view class="order-status">{{getOrderType(item.order_status)}}</view>
            </view>
            <view class="flex start">
                <image :src="IMAGE_URL + '/static/login/bg.png'"></image>
                <view class="flex column between start store-info">
                    <view style="display: grid;">
                        <view class="font28 fontbold-500 ellipsis" style="width: 100%;">{{item.service_name}}</view>
                        <view class="sale-num font24">已选：{{item.sku_name}}</view>
                    </view>
                    <view class="flex price">
                        <text class="font24">￥</text>
                        <text class="font28">{{item.total_price}}</text>
                        <text class="font20">/{{item.sku.unit}}</text>
                    </view>
                </view>
            </view>
            <view class="flex order-btn font28 fontbold-500">
                <view class="flex btn-1">取消订单</view>
                <view class="flex btn-2">去支付</view>
            </view>
        </view>
        <!-- 没有更多数据提示 -->
        <view v-if="!loading && !hasMore && orderList.length!==0" class="no-more-tip">
            <text>没有更多数据了</text>
        </view>

        <view class="empty">
            <u-empty v-if='orderList.length==0' mode="order" icon="order"></u-empty>
        </view>

        <u-popup :show="showFilter" mode="bottom" @close="showFilter = false" :round="28">
            <view class="flex modal-title">
                <view class="flex font36 fontbold-500">全部筛选</view>
                <i class="iconfont icon-close font32" @click="showFilter = false"></i>
            </view>
            <view class="modal-content margin32">
                <view class="sub-titile font30 fontbold-500">价格区间</view>
                <view class="flex start checkbox-box">
                    <view class="flex column checkbox" v-for="item in priceBetween" :key="item.name"
                        :class="{active: item.name === params.price }">
                        <view class="font28">{{item.name}}</view>
                        <view class="font24">{{item.des}}</view>
                    </view>
                </view>
                <view class="flex between input-group">
                    <input placeholder="自定义最低价" />
                    <view class="line"></view>
                    <input placeholder="自定义最高价" />
                </view>
                <view class="sub-titile font30 fontbold-500">品牌</view>
                <view class="flex start checkbox-box">
                    <view class="flex column checkbox" v-for="item in priceBetween" :key="item.name"
                        :class="{active: item.name === params.price }">
                        <view class="font28">{{item.name}}</view>
                        <view class="font24">{{item.des}}</view>
                    </view>
                </view>
            </view>
            <view class="flex modal-footer font36 fontbold-500">
                <view class="flex clear-btn" @click="showFilter = false">清空选择</view>
                <view class="flex submit-btn" @click="showFilter = false">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import headerVue from '../../components/header.vue';
    import appConfig from '@/config/app.js'
    import {
        gethousekeepingOrderList
    } from '@/api/index.js'
    import { data } from '@/node_modules/uview-ui/libs/mixin/mixin';
    export default {
        components: {
            headerVue
        },
        data() {
            return {
                IMAGE_URL: appConfig.IMAGE_URL,
                imageUrl: '~@static/shop/',
                typeIndex: -1,
                orderIndex: 2,
                orderType: ['服务订单', '商城订单', '邻工订单'],
                typeList: [{
                        type: -1,
                        name: '全部',
                    },
                    {
                        type: 0,
                        name: '待支付',
                    },
                    {
                        type: 1,
                        name: '待使用',
                    },
                    {
                        type: 2,
                        name: '待接单',
                    },
                    {
                        type: 4,
                        name: '服务中',
                    },
                    {
                        type: 5,
                        name: '待评价',
                    }
                ],
                goodsType: [{
                        name: '限时秒杀，超值疯抢'
                    },
                    {
                        name: '团购套餐，限时特惠'
                    },
                    {
                        name: '全网新品，限时特惠'
                    },
                    {
                        name: '定金膨胀，抢先预定'
                    }
                ],
                radioArr: [{
                        name: '全部',
                        value: ''
                    },
                    {
                        name: '便利店',
                        value: '便利店'
                    },
                    {
                        name: '大型超市',
                        value: '大型超市'
                    },
                    {
                        name: '甜筒专卖店',
                        value: '甜筒专卖店'
                    },
                ],
                priceBetween: [{
                        name: '14元以下',
                        des: '60%的选择'
                    },
                    {
                        name: '14-34元',
                        des: '30%的选择'
                    },
                    {
                        name: '34-79元以下',
                        des: '9%的选择'
                    },
                    {
                        name: '79元以上',
                        des: '1%的选择'
                    },
                ],
                selectShow: false,
                showFilter: false,
                params: {
                    keyword: '',
                    type: ''
                },
                orderList: [],
                limit: 10,
                loading: false,
                hasMore: true,
                type: -1,
            }
        },
        computed: {
            getOrderType() {
                return (order_status) => {
                    for (let key in this.typeList) {
                        if (this.typeList.hasOwnProperty(key) && this.typeList[key].type === order_status) {
                            return this.typeList[key].name
                        }
                    }
                }
            }
        },
        onLoad(parm) {
            this.orderIndex = parm.tab;
        },
        onShow() {
            if (this.orderIndex == 0) {
                this.resetAndFetch();
            }
        },
        onReachBottom() {
            // 触底加载更多
            if (this.orderIndex == 0) {
                this.getOrderListEvent()
            }
        },
        methods: {
            getOrderTab(index) {
                this.typeIndex = index;
                this.type = index;
                this.resetAndFetch();
            },
            resetAndFetch() {
                this.page = 1
                this.hasMore = true
                this.orderList = []
                if(!uni.getStorageSync('token')){
                    this.getOrderListEvent()
                }
            },
            // 获取订单列表
            getOrderListEvent() {
                if (this.loading || !this.hasMore) return
                this.loading = true
                let data = {
                    type: this.type,
                    limit: this.limit,
                    page: this.page,
                    uid: uni.getStorageSync('userInfo').id
                }
                gethousekeepingOrderList(data).then((res) => {
                    if (res && res.errno === 0) {
                        const list = (res.data && res.data.list) || []
                        if (this.page === 1) {
                            this.orderList = list
                        } else {
                            this.orderList = this.orderList.concat(list)
                        }
                        // 是否还有更多
                        if (!list.length || list.length < this.limit) {
                            this.hasMore = false
                        } else {
                            this.page += 1
                        }
                    }
                }).finally(() => {
                    this.loading = false
                })
            },


            goPage(url) {
                uni.navigateTo({
                    url
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        background: #F6F6F6;
    }

    .margin32 {
        margin: 0 32rpx;
    }

    .search-box {
        height: 72rpx;
        background: $uni-bg-color;
        border-radius: 60rpx;
        padding: 0 28rpx;
        margin-bottom: 28rpx;
        width: 100%;

        .iconfont {
            color: $uni-text-color-grey;
            margin-right: 20rpx;
        }

        .input {
            width: 100%;
            height: 100%;
            color: $uni-text-color-grey;
        }
    }

    .scroll-x {
        padding: 28rpx 0;
        box-sizing: border-box;
        border-radius: 20rpx;
        white-space: nowrap;
        width: auto;

        .type {
            padding: 0 20rpx;
            box-sizing: border-box;
            height: 48rpx;
            background: #EEEEEE;
            border-radius: 60rpx;
            color: $uni-text-color-grey;
            margin-right: 28rpx;

            &:nth-child(1) {
                margin-left: 32rpx;
            }
        }

        .active {
            color: $uni-text-color-inverse;
            background: $uni-color-primary;
            font-weight: 500;
        }

        .next-btn {
            width: 62rpx;
            height: 48rpx;
            position: absolute;
            right: 0;
        }
    }

    .price {
        color: $uni-text-color-red;
        align-items: baseline;
    }

    .select-box {
        position: relative;
        background: $uni-bg-color;
        box-sizing: border-box;

        .filter-btn {
            color: $uni-color-primary;

            .icon-loudou {
                margin-right: 4rpx;
            }
        }

        .select-modal {
            width: 100vw;
            position: absolute;
            z-index: 10;
            background: $uni-bg-color;
            border-radius: 0rpx 0rpx 28rpx 28rpx;
            left: -32rpx;
            top: 100%;
            margin-top: 8rpx;
            padding: 28rpx 32rpx;
            box-sizing: border-box;

            .select-modal-item {
                margin-top: 40rpx;
                color: $uni-text-color-grey1;

                &:nth-child(1) {
                    margin: 0;
                }
            }

            .radio {
                width: 26rpx;
                height: 26rpx;
                border-radius: 50%;
                border: 1rpx solid $uni-color-primary;
            }

            .active {
                color: $uni-text-color;

                .radio {
                    background: $uni-color-primary;
                    color: $uni-text-color-inverse;
                }
            }
        }
    }

    .order-type {
        padding: 20rpx 32rpx;

        .item {
            color: $uni-text-color-grey1;
            height: 42rpx;
            position: relative;
        }

        .active {
            font-weight: 500;
            font-size: 32rpx;
            color: $uni-text-color;

            &:before {
                content: '';
                width: 32rpx;
                height: 6rpx;
                background: #0785CF;
                border-radius: 20rpx;
                position: absolute;
                bottom: -20rpx;
                left: 50%;
                transform: translate(-50%, 0);
            }
        }
    }

    .white-box {
        background: $uni-bg-color;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 20rpx;
        padding: 28rpx;
        box-sizing: border-box;
        margin-bottom: 28rpx;

        .store-title {
            padding-bottom: 28rpx;
            border-bottom: 1rpx solid #DDDDDD;
            margin-bottom: 28rpx;
            color: $uni-text-color-grey1;
        }

        .order-status {
            color: #DF9824;
        }

        image {
            width: 160rpx;
            height: 160rpx;
            border-radius: 20rpx;
            margin-right: 18rpx;
            flex-shrink: 0;
        }

        .store-info {
            height: 160rpx;
            flex: 1;
            width: 0;
            align-items: flex-start;

            .sale-num {
                color: $uni-text-color-grey;
                margin-top: 12rpx;
            }

            .icon-comment {
                margin-left: 26rpx;
            }
        }

        .order-btn {
            margin-top: 28rpx;
            color: $uni-text-color-inverse;
            justify-content: flex-end;

            .btn-1 {
                width: 160rpx;
                height: 56rpx;
                background: #DF9824;
                border-radius: 100rpx;
                margin-right: 28rpx;
            }

            .btn-2 {
                width: 160rpx;
                height: 56rpx;
                background: #0785CF;
                border-radius: 100rpx;
            }
        }
    }

    .modal-title {
        margin: 40rpx 0;

        .icon-close {
            position: absolute;
            right: 32rpx;
            top: 50rpx;
        }
    }

    .modal-content {

        .checkbox-box {
            flex-wrap: wrap;

            .checkbox {
                width: calc((100% - 36rpx) / 3);
                height: 86rpx;
                background: #F5F5F5;
                border-radius: 100rpx;
                margin-top: 40rpx;
                margin-right: 18rpx;

                &:nth-child(3n) {
                    margin-right: 0;
                }

                .font24 {
                    color: $uni-text-color-grey;
                    margin-top: 4rpx;
                }
            }

            .active {
                background: #FFEFD5;
            }
        }

        .input-group {
            height: 86rpx;
            background: #F5F5F5;
            border-radius: 60rpx;
            margin: 40rpx 0 54rpx;

            .line {
                width: 40rpx;
                height: 1rpx;
                background: $uni-text-color-grey;
            }

            input {
                text-align: center;
            }
        }
    }

    .modal-footer {
        color: $uni-text-color-inverse;
        margin: 40rpx 0 calc(env(safe-area-inset-bottom) + 20rpx) 0;

        .clear-btn {
            width: 260rpx;
            height: 80rpx;
            background: #DF9824;
            box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(223, 152, 36, 0.3);
            border-radius: 100rpx;
        }

        .submit-btn {
            width: 260rpx;
            height: 80rpx;
            background: #0785CF;
            box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.3);
            border-radius: 100rpx 100rpx 100rpx 100rpx;
            margin-left: 60rpx;
        }
    }

    .no-more-tip {
        text-align: center;
        margin: 20rpx 0;
        font-size: 24rpx;
        color: #999999;
    }

    .empty {
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>